<template>
  <div v-if="show" class="modal-overlay" @click="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ title }}</h5>
        <img src="./close.jpg" style="width: 23px; height:23px; cursor: pointer;" alt="" @click="close">
        <!-- <button type="button" class="close" @click="close">close<i class="feather-close"></i></button> -->
      </div>
      <div class="modal-body">
        <slot>cxx</slot>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-confirm mr-8" @click="save">保存</button>
        <button type="button" class="btn-cancel" @click="close">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '标题'
  }
})
const emit = defineEmits(['save'])


const show = ref(false);
const close = () => {
  show.value = false;
  document.body.style.overflow = ''; // 恢复滚动条滚动
}
const open = () => {
  show.value = true;
  // 阻止滚动
  document.body.style.overflow = 'hidden';
}

const save = () => {
  emit('save')
}

defineExpose({
  close,
  open
})
</script>

<style scoped>
.modal-header {
  padding: 20px 20px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(.3rem - 1px);
  border-top-right-radius: calc(.3rem - 1px);
}

.modal-header h5 {
  color: #392C7D;
  font-size: 24px;
  font-weight: 700;
  text-transform: capitalize;

  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  padding: 20px;

}

.btn-confirm:hover,
.btn-cancel:hover {
  opacity: 0.86;
  color: #ffffff;

}

.modal-footer {
  display: flex;
  padding: 20px;
}

.btn-confirm {
  background-color: #FF5364;
  display: block;
  padding: 10px 25px;
  color: #ffffff;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
}

.btn-cancel {
  background-color: #455A64;
  display: block;
  padding: 10px 25px;
  color: #ffffff;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #fff;

  border-radius: 5px;
  max-width: 860px;
  min-width: 500px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>